<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
  import { useTokenStore } from '@/store/token'
  import type { MsgItem } from '@/types/room'
  import dayjs from 'dayjs'

  const store = useTokenStore()
  // 接收消息
  const props = defineProps<{
    msg: MsgItem
    type: number // 1: 文字消息 4: 图片消息
  }>()
  const previewImage = (url: string) => {
    uni.previewImage({
      urls: [url],
    })
  }
</script>

<template>
  <!-- 文字/图片消息 -->
  <view class="message-item" :class="{ reverse: msg.from === store.getUserId() }">
    <image class="room-avatar" :src="msg.fromAvatar" />
    <view class="room-message">
      <view class="time">{{ dayjs(msg.createTime).format('HH:mm') }}</view>
      <view class="text" v-if="type === 1">
        {{ msg.msg?.content }}
      </view>
      <image
        @click="previewImage(msg.msg?.picture?.url || '')"
        v-if="type === 4"
        class="image"
        :src="msg.msg?.picture?.url"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style lang="scss">
  .message-item {
    display: flex;
    align-self: flex-start;
    margin-top: 60rpx;

    .room-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .room-message {
      margin-left: 20rpx;
    }

    .time {
      font-size: 26rpx;
      color: #979797;
    }

    .image {
      max-width: 420rpx;
      margin-top: 10rpx;
    }

    .text {
      max-width: 420rpx;
      line-height: 1.75;
      padding: 30rpx 40rpx;
      margin-top: 16rpx;
      border-radius: 20rpx;
      font-size: 30rpx;
      color: #3c3e42;
      background-color: #fff;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -25rpx;
        width: 26rpx;
        height: 52rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
        background-size: contain;
      }
    }

    &.reverse {
      flex-direction: row-reverse;
      align-self: flex-end;

      .room-message {
        margin-left: 0;
        margin-right: 20rpx;
      }

      .time {
        text-align: right;
      }

      .text {
        background-color: #16c2a3;
        color: #fff;

        &::after {
          left: auto;
          right: -25rpx;
          background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
        }
      }
    }
  }
</style>
